import { useEffect, useRef, useState } from "react"
import { Button, Card, Space } from "antd"
import type { GetProp, TableProps } from 'antd';
import { PlusOutlined } from "@ant-design/icons"
import TableList from "./components/TableList"
import SearchForm, { ExposeType } from "./components/SearchForm"
import DialogForm from "./components/DialogForm"
import { type RegistryType, registry, QueryUserType, getUserList, type RowType } from "@/api/user"

export type TablePaginationConfig = Exclude<GetProp<TableProps, 'pagination'>, boolean>;

export enum CloseEnum {
	'确认' = '1',
	'取消' = '0'
}

export enum DialogEnum {
  '新增' = '1',
  '编辑' = '2'
}

const ComplexTable = () => {
  const searchFormRef = useRef<ExposeType | null>(null)
  const [isDrawerOpen, setDrawerOpen] = useState(false)
  const [isDialogState, setDialogState] = useState(DialogEnum['新增'])
  const [tableData, setTableData] = useState<RowType[]>([])
  const [editRow, setEditRow] = useState({} as RowType)
  const [pages, setPages] = useState({pageNo: 1, pageSize: 10})
  const [loading, setLoading] = useState(false)

  const onAdd = () => {
    setDialogState(DialogEnum['新增'])
    setDrawerOpen(true)
  }

  const onClose = (closeType: CloseEnum, formInfo?: RegistryType) => {
    setDrawerOpen(false)

    if (closeType === CloseEnum['确认']) {
      const params = {
        ...formInfo,
        city: JSON.stringify(formInfo!.city),
        career: JSON.stringify(formInfo!.career),
        avatarObj: JSON.stringify(formInfo!.avatarObj),
        fileList: JSON.stringify(formInfo!.fileList)
      }

      registry(params as RegistryType).then(res => {
        if (res.code === 200) {
          setPages({...pages, pageNo: 1})
          const formInfo = searchFormRef.current?.formInfo
          queryUserList(formInfo)
        }
      })
    }
  }

  const queryUserList = (formInfo: any) => {
    setLoading(true)
    const params = {
      pageDto: pages,
      queryDto: formInfo
    }

    getUserList(params).then(res => {
      if (res.code === 200) {
        setTableData(res.data.list || [])
      }
    }).finally(() => {
      setLoading(false)
    })
  }

  const onSearch = (formInfo: QueryUserType) => {
    queryUserList(formInfo)
  }

  const onReset = (formInfo: QueryUserType) => {
    setPages({
      ...pages,
      pageNo: 1
    })
    queryUserList(formInfo)
  }

  const onEdit = (row: RowType) => {
    setDialogState(DialogEnum['编辑'])
    setDrawerOpen(true)
    const tableRow = JSON.parse(JSON.stringify(row))
    tableRow.fileList = JSON.parse(tableRow.fileList)
    tableRow.avatarObj = JSON.parse(tableRow.avatarObj)
    tableRow.city = JSON.parse(tableRow.city)
    tableRow.career = JSON.parse(tableRow.career)
    setEditRow(tableRow)
  }

  const onTable = (pagination: TablePaginationConfig) => {
    setPages({
      ...pages,
      pageNo: pagination.current!
    })
  }

  useEffect(() => {
    const formInfo = searchFormRef.current?.formInfo
    queryUserList(formInfo)
  }, [pages])

  return (
    <Space direction="vertical" className="w-full">
      <Card>
        <SearchForm ref={searchFormRef} onSearch={onSearch} onReset={onReset} />
      </Card>

      <Card title="用户列表" extra={
        <div>
          <Button type="link" icon={<PlusOutlined />} onClick={onAdd}>新 增</Button>
        </div>
      }>
        <TableList tableData={tableData} loading={loading} onEdit={onEdit} onTable={onTable} />
      </Card>

      <DialogForm isDrawerOpen={isDrawerOpen} isDialogState={isDialogState} formInfo={editRow} onClose={onClose} />
    </Space>
  )
}

export default ComplexTable